<template>
    <div style="display: flex;flex-direction: column;width: 100%;">
    <p class="title-p">
             通知
        </p>
        <div id="request-box">
            <LIST  v-model:lisdata="data" @load_more="load_more"/>
        </div> 
    </div>
</template>

<script setup>
import { computed, inject, onMounted,ref} from "vue";
import LIST from "./list.vue" //为了减少更多自定义导致循环嵌套的开销单独使用list
import { get_message_no_response } from "@/api/chat/user_behavior"
import { noreapeat_array_byId} from "@/static/js/array/concat_two_norepeat"
const chat = inject('chat')()
const last_meta=ref()
const data = computed(() => { 
    return  chat.value.get_no_response_message()
    }
)

const load_more = async () => {
    if (data?.value?.length >= last_meta?.total_count) { return }
    const middledata = await get_message_no_response(chat?.value?.get_user_info()?.id, last_meta?.value?.current || 1)
    const norepeat_data=noreapeat_array_byId(middledata?.data || [],data.value || [])
    chat.value.set_no_response_message(norepeat_data)
}

onMounted(async () => {
    const middledata = await get_message_no_response(chat?.value?.get_user_info()?.id,1)
    chat.value.set_no_response_message(middledata?.data)
    last_meta.value = middledata?.meta
})

</script >

<style  scoped>
#request-box{
    width: 100%;
    height: 100%;
    overflow: scroll;
    /* background-color:gold; */
}
#request-box::-webkit-scrollbar{
    display: none;
}

.title-p{
  color:rgba(255, 255, 255, 0.75);
  display: inline-block;
  padding: 4px 14px; 
  border-radius: 12px; 
  font-size: 14px;
  font-weight: 600; 
  background-color:#649dff; ; 
  box-shadow: 0 2px 5px rgba(99, 151, 241, 0.3); 
  text-transform: uppercase; 
  letter-spacing: 0.5px;
  line-height: 1.5;
  transition: all 0.3s ease;
  border: 1px solid transparent; 
}
</style>